@import "../variables";

.workspace {
    .dropzone-overlay {
        position: fixed;
        top: $navbar-height;
        bottom: 0;
        left: $sidebar-width;
        right: 0;
        z-index: 100;
        background-color: rgba(255, 255, 255, .5);
        border: 4px dashed #286090;
        text-align: center;
        pointer-events: none;

        &.hidden {
            display: none;
        }

        .text-block {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 32px;
        }
    }
    .dropzone {
        height: 100%;
    }

    .workspace-table {
        display: table;
        width: 100%;
        height: 'calc(100vh - %s)' % ($navbar-height);
    }
    .workspace-table-row {
        display: table-row;
    }

    .primary-container,
    .secondary-container,
    .primary-toggler,
    .secondary-toggler,
    .default-container {
        display: table-cell;
        position: relative;
    }
    .primary-container {
        border-right: 1px solid #ccc;
    }
    .secondary-container {
        border-left: 1px solid #ccc;
    }
    .primary-container,
    .secondary-container {
        vertical-align: top;
        background-color: #f6f7f8;
        width: 360px;
        max-width: 360px;
        min-width: 360px;
        padding: 0 10px;

        &.hidden {
            display: none;
        }
    }
    .primary-toggler,
    .secondary-toggler {
        background-color: #f6f7f8;
        padding-top: 5px;
        text-align: center;
        width: $toggler-width;

        // http://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc
        height: 'calc(100vh - %s)' % ($navbar-height);
    }
    .primary-toggler {
        border-right: 1px solid #ccc;
    }
    .secondary-toggler {
        border-left: 1px solid #ccc;
    }
    .default-container {
        min-width: 360px;

        &.fixed {
            position: fixed;
            left: 360px;
            right: 360px;
            top: ($navbar-height + 1);
            bottom: 0;
        }
    }
}
